<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-10 14:26:48
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-11 14:42:02
 * @FilePath: /web/src/views/indexPage/quality.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 11:09:23
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<el-row>
			<el-col :span="7">
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">桁吊安全监测</div>
					</div>
				</div>
				<div class="mid">
					<div class="plan" style="margin-left:0">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">桁吊预警</div>
						</div>
						<div class="yuan">
							<div class="nei">
								<div class="box">
									<img style="width: 90px;" src="../../assets/images/xiandiao.png" alt="">
									<div>
										<div class="text1">1号桁吊</div>
										<div class="text2">正常</div>
									</div>
								</div>
								<div>
									<img src="../../assets/images/u1153.svg" alt="">
								</div>
							</div>
							<div class="nei">
								<div class="box">
									<img style="width: 90px;" src="../../assets/images/xiandiao.png" alt="">
									<div>
										<div class="text1">2号桁吊</div>
										<div class="text2">正常</div>
									</div>
								</div>
								<div>
									<img src="../../assets/images/u1153.svg" alt="">
								</div>
							</div>
							<div class="nei">
								<div class="box">
									<img style="width: 90px;" src="../../assets/images/xiandiao.png" alt="">
									<div>
										<div class="text1">3号桁吊</div>
										<div class="text2">正常</div>
									</div>
								</div>
								<div>
									<img src="../../assets/images/u1153.svg" alt="">
								</div>
							</div>
							<div class="nei">
								<div class="box">
									<img style="width: 90px;" src="../../assets/images/xiandiao.png" alt="">
									<div>
										<div class="text1">4号桁吊</div>
										<div class="text2">正常</div>
									</div>
								</div>
								<div>
									<img src="../../assets/images/u1153.svg" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mid">
					<div class="plan" style="margin-left:0">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">桁吊开箱记录</div>
						</div>
						<div class="list" v-for="(item, index) in 5" :key="index">
							<img src="../../assets/images/u1174.png" alt="">
							<div style="margin-left: 20px;">2024年9月3日 15：26</div>
							<div style="margin-left: 10px;">开箱人：胖虎</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="11">
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt="" style="width: 180%;"></div>
						<div class="text">视频监控</div>
					</div>
					<div class="video">
						<div class="list">
							<img src="../../assets/images/u1181.svg" alt="">
							<div class="shipin"></div>
						</div>
						<div class="list">
							<img src="../../assets/images/u1181.svg" alt="">
							<div class="shipin"></div>
						</div>
						<div class="list">
							<img src="../../assets/images/u1181.svg" alt="">
							<div class="shipin"></div>
						</div>
						<div class="list">
							<img src="../../assets/images/u1181.svg" alt="">
							<div class="shipin"></div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt="" style="width: 115%;"></div>
						<div class="text">AI安全识别</div>
					</div>
				</div>
				<div class="mid">
					<div class="plan" style="margin-left:0">
						<div class="title">
							<img src="../../assets/images/u39.svg"  alt="">
							<div class="statistics">AI抓拍统计</div>
						</div>
						<div class="colums">
							<div class="progress">
								<div style="position: relative;">
									<div class="left"></div>
									<div class="right1"></div>
									<div class="text">
										未扎头发
									</div>
									<div class="blue"></div>
									<div class="blue1"></div>
									<div class="middle">
										200次
									</div>
								</div>
							</div>
							<div class="progress">
								<div style="position: relative;">
									<div class="left"></div>
									<div class="right1"></div>
									<div class="text">
										未扎头发
									</div>
									<div class="blue"></div>
									<div class="blue1"></div>
									<div class="middle">
										200次
									</div>
								</div>
							</div>
							<div class="progress">
								<div style="position: relative;">
									<div class="left"></div>
									<div class="right1"></div>
									<div class="text">
										未扎头发
									</div>
									<div class="blue"></div>
									<div class="blue1"></div>
									<div class="middle">
										200次
									</div>
								</div>
							</div>
							<div class="progress">
								<div style="position: relative;">
									<div class="left"></div>
									<div class="right1"></div>
									<div class="text">
										未扎头发
									</div>
									<div class="blue"></div>
									<div class="blue1"></div>
									<div class="middle">
										200次
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mid">
					<div class="plan" style="margin-left:0">
						<div class="title">
							<img class="headImg" src="../../assets/images/u39.svg"  alt="">
							<div class="statistics">AI抓拍记录</div>
						</div>
						<div class="slider">
							<div class="list">
								<div class="left">
									<img src="../../assets/images/u1027.svg" alt="">
									<div>未穿反光衣报警</div>
									<div>2024年9月3日 15：26</div>
								</div>
								<div class="">
									<img class="wrang" style="width: 180px; margin-left: 20px;" src="../../assets/images/u1019.png" alt="">
								</div>
							</div>
							<div class="list">
								<div class="left">
									<img src="../../assets/images/u1027.svg" alt="">
									<div>未穿反光衣报警</div>
									<div>2024年9月3日 15：26</div>
								</div>
								<div class="">
									<img class="wrang" style="width: 180px; margin-left: 20px;" src="../../assets/images/u1019.png" alt="">
								</div>
							</div>
							<div class="list">
								<div class="left">
									<img src="../../assets/images/u1027.svg" alt="">
									<div>未穿反光衣报警</div>
									<div>2024年9月3日 15：26</div>
								</div>
								<div class="">
									<img class="wrang" style="width: 180px; margin-left: 20px;" src="../../assets/images/u1019.png" alt="">
								</div>
							</div>
							<div class="list">
								<div class="left">
									<img src="../../assets/images/u1027.svg" alt="">
									<div>未穿反光衣报警</div>
									<div>2024年9月3日 15：26</div>
								</div>
								<div class="">
									<img class="wrang" style="width: 180px; margin-left: 20px;" src="../../assets/images/u1019.png" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import pieChart from '../../components/pieChart/index.vue'
import lineChart from '../../components/lineChart/index.vue'
export default {
	components: {
		pieChart,
		lineChart
	},
	data() {
		return {

			list: [{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			{ pc: 'JY20240903004', sl: '30', jcr: '张三', sj: '2024.09.03  13：26', jg: '正常' },
			],
			input3: ''
		}
	},
	mounted() {

	},
};
</script>
<style lang="scss" scoped>
.ku {
	position: relative;
	margin-left: 4%;
	width: 70%;

	img {
		width: 100%;
		height: 120px;
	}

	.text {
		position: absolute;
		color: white;
		top: 30px;
		left: 20px;
		font-weight: 700;
		font-style: normal;
		font-size: 20px;
		margin-left: 50px;
		display: flex;
		width: 100%;

	}

	.day {
		margin: 0 70px;
		font-size: 36px;
		color: #FF9900;
	}

	.shu {
		margin-left: 20%;

		.more {
			display: flex;

			img {
				width: 10px;
				height: 22px;
				margin-top: 5px;
			}
		}
	}

	.column {
		font-weight: 700;
		font-style: normal;
		font-size: 28px;
		color: #2DE9DB;
		margin-top: 10px;

	}
}

.mid {
	margin-top: 20px;
	margin-left: 9%;

	.list {
		display: flex;
		padding: 5px 20px;
		background-color: rgba(8, 54, 78, 1);
		color: #fccd1d;
		align-items: center;
		font-size: 18px;
		font-weight: bold;
		margin: 20px 10px;
		border-radius: 5px;

		img {
			width: 40px;
		}
	}

	.plan {
		width: 90%;
		border: 1px solid rgba(2, 231, 243, 1);
		position: relative;

		.right {
			color: white;
			position: absolute;
			top: 10px;
			right: 10px;
			font-weight: bold;

			.yellow {
				color: #fccd1d;
			}
		}
	}

	.yuan {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		width: 100%;

		.nei {
			width: 50%;
			text-align: center;
		}

		.box {
			display: flex;
			justify-content: center;
			width: 100%;
			align-items: center;
			margin: 30px 0 20px 0;

			img {
				margin-right: 20px;
			}

			.text1 {
				color: white;
				font-size: 12px;
			}

			.text2 {
				color: #70B603;
				font-size: 16px;
			}
		}

	}

	.title {
		position: relative;

		.statistics {
			top: 6px;
			left: 10px;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #01F7FD;
			position: absolute;
		}
	}
	.colums{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.progress {
		margin-top: 20px;
		position: relative;
		height: 50px;
		padding-left: 3% ;
		width: 50%;
		margin-bottom: 20px;
		.left {
			background-color: rgba(252, 205, 29, .3);
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			width: 100px;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
		}

		.right1 {
			border-top: 50px solid rgba(252, 205, 29, .3);
			/* 梯形的高度 */
			border-right: 25px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 100px;
			top: 0px;
		}

		.text {
			position: absolute;
			top: 10px;
			left: 10px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 20px;
			color: #FCCD1D;
		}

		.middle {
			display: flex;
			position: absolute;
			left: 154px;
			top: 15px;
			color: #01F7FD;
		}

		.line {
			height: 20px;
			width: 5px;
			border-radius: 3px;
			background: white;
			margin-right: 8px;
		}

		.yellow {
			color: #FCCD1D;
		}

		.total {
			position: absolute;
			right: 10%;
			top: 13px;
			font-size: 18px;
			color: white;
			font-weight: bold;
		}

		.blue {
			border-bottom: 40px solid rgba(1, 247, 253, .5);
			/* 梯形的高度 */
			border-left: 20px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 121px;
			top: 4px;
		}

		.blue1 {
			background-color: rgba(1, 247, 253, .5);
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			width: 18%;
			height: 40px;
			position: absolute;
			left: 161px;
			top: 4px;
		}
	}
}

.waring {
	width: 82%;
	height: 220px;
	margin-left: 11%;
	margin-top: 20px;
	overflow: hidden;
	overflow-y: scroll;

	.redline {
		width: 98%;
		background: rgb(144, 65, 73);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}

	.yellowline {
		width: 98%;
		background: rgb(179, 115, 34);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}
}

.record {
	margin-left: 7%;
	width: 90%;
	margin-top: 20px;

	.top {
		display: flex;
		position: relative;

		.left {
			img {
				width: 30px;
				height: 40px;
			}
		}

		.right {
			img {
				margin-top: 5px;
				width: 100%;
				height: 30px;
			}
		}

		.text {
			position: absolute;
			left: 30px;
			top: 8px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #00FFFF;
		}
	}
}

.video {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	.list {
		border: 1px solid #FFFF;
		border-radius: 8px;
		width: 48%;
		padding-top: 20px;
		margin-top: 20px;
		margin-right: 2%;

		img {
			width: 30px;
			margin-left: 20px;
		}

		.shipin {
			height: 300px;
		}
	}
}
.slider{
	.list{
		display: flex;
		justify-content: space-between;
		border:  1px solid #FFFF;
		margin: 10px 20px; 
		.left{
			width: 180px;
			text-align: center;
			color: white;
			padding: 20px 0;
			
			.headImg{
				width: 40px;
			}
			.wrang{
				
			}
		}
	}
}
</style>